<template>
    <admin-main :breadcrumbs="breadcrumbs">
        <fold-panel id="tabs" title="YaHaHa!!!">
            <ul id="mys_tabs" class="nav nav-tabs">
                <li class="active"><a href="#table-1" data-toggle="tab">分类列表</a></li>
                <li><a href="#add" data-toggle="tab">添加分类</a></li>
            </ul>
            <div id="mys_tabsContent" class="tab-content">
                <div class="tab-pane fade in active" id="table-1">
                    <advanced-table :head="tableHead" :insert="addCategory">
                        <category-table-row v-for="row in tableData" :tableRow="row" :key="row.id"
                                            :switchChange="onchange"
                                            :edit="edit" :trash="trash"></category-table-row>
                    </advanced-table>
                </div>
                <div class="tab-pane fade" id="add">
                    <form @submit.prevent="submit" class="col-lg-4 col-lg-offset-4">
                        <div class="form-group">
                            <label for="name">名称:</label>
                            <input type="text" class="form-control" required id="name"/>
                        </div>
                        <div class="form-group">
                            <label>父分类:</label>
                            <selector :data="selectorData" id="set" v-model="parentVal"></selector>
                        </div>
                        <div class="form-group">
                            <label for="icon">图标:</label>
                            <input type="file" required id="icon"/>
                        </div>
                        <div class="form-group">
                            <label for="background">背景图片:</label>
                            <input type="file" required id="background"/>
                        </div>
                        <div class="form-group">
                            <label for="description">描述:</label>
                            <input type="text" class="form-control" required id="description"/>
                        </div>
                        <div class="form-group">
                            <label for="sort">排序:</label>
                            <input type="number" class="form-control" id="sort"/>
                        </div>
                        <div class="form-group">
                            <label>启用?:</label>
                            <switch-i name="enable" v-model="enable" off="关闭" on="启用"></switch-i>
                        </div>
                        <input type="submit" class="btn btn-success pull-right" value="提交"/>
                    </form>
                </div>
            </div>
        </fold-panel>
        <document-title :title="breadcrumbs.title"></document-title>
        <modal title="编辑" :show="show" :onsubmit="updateCategory">
            <div class="form-group">
                <label for="title">title</label>
                <input type="text" v-model="editData.name" id="title" class="form-control">
            </div>
            <div class="form-group">
                <label for="description_">Description</label>
                <input type="text" v-model="editData.description" id="description_" class="form-control">
            </div>
            <div>
                <div class="form-group">
                    <label for="parent">父分类:</label>
                    <selector :data="selectorData" id="parent" v-model="editData.parent"></selector>
                </div>
            </div>
            <div class="form-group">
                <label>Icon</label>
                <input type="file" class="form-control">
            </div>
            <div class="form-group">
                <label>Background</label>
                <input type="file" class="form-control">
            </div>
            <div class="form-group">
                <label>Enable</label>
                <switch-i v-model="editData.enable"></switch-i>
            </div>
        </modal>
        <loading :isLoading="loading"></loading>
    </admin-main>
</template>

<script>
    /* eslint-disable no-undef */
    import AdminMain from '../AdminMain.vue';
    import DocumentTitle from '../../layout/Title.vue';
    import FoldPanel from 'vue-fiu-ui/src/main/js/components/panel/FoldPanel.vue';
    import Selector from 'vue-fiu-ui/src/main/js/components/select/Selector.vue';
    import AdvancedTable from './layout/AdvancedTable.vue';
    import ImagePopups from 'vue-fiu-ui/src/main/js/components/widget/ImagePopups.vue';
    import Icon from 'vue-fiu-ui/src/main/js/components/widget/Icon.vue';
    import CategoryTableRow from './layout/CategoryTableRow.vue';
    import SwitchI from 'vue-fiu-ui/src/main/js/components/switch/Switch.vue';
    import Loading from '../../layout/Loading.vue';
    import Modal from 'vue-fiu-ui/src/main/js/components/widget/Modal.vue';

    export default {
        components: {
            Modal,
            Loading,
            SwitchI,
            CategoryTableRow,
            Icon,
            ImagePopups,
            AdvancedTable,
            Selector,
            FoldPanel,
            DocumentTitle,
            AdminMain
        },
        data () {
            return {
                breadcrumbs: {
                    title: '商品分类',
                    data: [
                        {to: {name: 'Home'}, icon: 'fa-home', cut: true, disabled: false, text: 'Home'},
                        {to: {name: 'Home'}, icon: 'fa-shopping-basket', cut: true, disabled: false, text: '商品'},
                        {to: '#', cut: false, disabled: true, text: '商品分类'}
                    ]
                },
                tableHead: [
                    {label: '+', width: '30'},
                    {label: 'id'},
                    {label: 'name'},
                    {label: 'parent'},
                    {label: 'icon'},
                    {label: 'background'},
                    {label: 'description'},
                    {label: 'enable'},
                    {label: 'sort'},
                    {label: 'action'}
                ],
                tableData: [],
                enable: false,
                selectorData: [
                    {value: 0, label: '主分类'}
                ],
                parentVal: {},
                loading: true,
                editData: {
                    parent: {}
                },
                show: false
            };
        },
        methods: {
            submit () {
                let formData = new FormData();
                formData.append('name', $('#name').val());
                formData.append('icon', $('#icon')[0].files[0]);
                formData.append('background', $('#background')[0].files[0]);
                formData.append('description', $('#description').val());
                formData.append('enable', this.enable === true ? 1 : 0);
                formData.append('parent_id', this.parentVal.value);
                formData.append('sort', $('#sort').val());
                axios.post('/category/create', formData, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
                    .then((res) => {
                        let type = 'success';
                        if (res.data.success === false) {
                            type = 'danger';
                        } else {
                            $('#mys_tabs a:first').tab('show');
                            this.initTableData();
                            this.initSelectData();
                        }
                        this.$notify.open({type: type, content: JSON.stringify(res.data.data)});
                    });
            },
            initTableData () {
                this.loading = true;
                axios.get('/category/list').then((res) => {
                    this.loading = false;
                    if (res.data.success === false) {
                        this.$notify.open({content: '查询失败'});
                        return 0;
                    }
                    this.tableData = res.data.data;
                });
            },
            initSelectData () {
                this.selectorData = [{value: 0, label: '主分类'}];
                axios.get('/category/main').then((res) => {
                    $.each(res.data.data, ($key, $value) => {
                        this.selectorData.push({
                            value: $value.id,
                            label: $value.name
                        });
                    });
                });
            },
            edit (e) {
                let id = this.getId(e);
                this.show = false;
                axios.get('/category/info/' + id).then((res) => {
                    if (res.data.success === true) {
                        res.data.data.enable = res.data.data.enable === 1;
                        this.editData = res.data.data;
                        this.editData.parent = {};
                        this.show = true;
                    } else {
                        this.$notify.open({content: JSON.stringify(res.data.data)});
                    }
                });
            },
            trash (e) {
                let id = this.getId(e);
                let name = this.getCategoryName(e);
                this.$modal.open({title: '?', content: `是否删除 ${name} ？`}, (e, m) => {
                    m.modal('hide');
                    axios.post('/category/delete', {id: id}).then(() => {
                        this.initTableData();
                    });
                });
                console.info(id);
            },
            addCategory () {
                $('#mys_tabs a:last').tab('show');
            },
            getId (e) {
                let tr = $(e.srcElement).parents('tr');
                return tr.attr('id');
            },
            onchange (state, id) {
                let enable = state ? 1 : 0;
                axios.post('/category/update', {id: id, enable: enable}).then((res) => {
                    this.$notify.open({
                        type: 'info',
                        content: JSON.stringify(res.data.data)
                    });
                });
            },
            getCategoryName (e) {
                let td = $(e.srcElement).parents('tr').children[1];
                return $(td).text();
            },
            updateCategory () {
                let data = new FormData(this.editData);
                $.each(this.editData, (key, value) => {
                    data.append(key, value);
                });
                axios.post('/category/update', data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
                    .then((res) => {
                        console.info(res);
                    });
            }
        },
        mounted () {
            this.initTableData();
            this.initSelectData();
        }
    };
</script>

<style>

</style>
